<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info"
            show-icon />

        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="(item, index) in typelist" :label="item.value" :name="item.key">
                <TableHeader
                    :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
                    :quick-search-placeholder="t('Quick search placeholder', { fields: t('yxerp.category.quick Search Fields') })">
                </TableHeader>
                <Table ref="tableRef"></Table>
            </el-tab-pane>
        </el-tabs>


        <!-- 表单 -->
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import { baTableApi } from '/@/api/common'
import { getType } from '/@/api/backend/yxerp/category'
import { defaultOptButtons } from '/@/components/table'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import { Operation } from '@element-plus/icons-vue'
import { TabsPaneContext } from 'element-plus'

defineOptions({
    name: 'yxerp/category',
})

const { t } = useI18n()
const tableRef = ref()
const activeName = ref('supplier')
const typelist = ref()
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])

const handleClick = (tab: TabsPaneContext, event: Event) => {
    baTable.table.filter!.search = [{
        field: 'type',
        val: tab.props.name as string,
        operator: 'eq',
    }]
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
}

const baTable = new baTableClass(
    new baTableApi('/admin/yxerp.Category/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('yxerp.category.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
            { label: t('yxerp.category.type'), prop: 'type', align: 'center', render: 'tag', operator: 'eq', sortable: false, replaceValue: { supplier: t('yxerp.category.type supplier'), product: t('yxerp.category.type product'), article: t('yxerp.category.type article'), custom: t('yxerp.category.type custom') } },
            { label: t('yxerp.category.pid'), prop: 'pname', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('yxerp.category.name'), prop: 'name', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('yxerp.category.image'), prop: 'image', align: 'center', render: 'image', operator: false },
            { label: t('yxerp.category.level'), prop: 'level', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('yxerp.category.sort'), prop: 'sort', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('yxerp.category.status'), prop: 'status_text', align: 'center', render: 'tag', operator: 'eq', sortable: false, replaceValue: {} },
            { label: t('yxerp.category.create_time'), prop: 'create_time', align: 'center', render: 'datetime', operator: 'RANGE', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
            { label: t('yxerp.category.update_time'), prop: 'update_time', align: 'center', render: 'datetime', operator: 'RANGE', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
            { label: t('Operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: [undefined],
    },
    {
        defaultItems: { type: 'supplier', level: 1, status: '1' },

    }

)



function loadType() {
    getType({ type: 123 })
        .then(res => {
            typelist.value = res.data.list
            if (res.data && res.data.list.length > 0) {
                // 设置第一个tab为活动tab
                activeName.value = res.data.list[0].key
               // baTable.table.filter!.quick_search = activeName.value
                baTable.table.filter!.search = [{
                    field: 'type',
                    val: activeName.value,
                    operator: 'eq',
                }]
                baTable.getIndex()?.then(() => {
                    
                    baTable.initSort()
                    baTable.dragSort()
                })
            }
        })
        .catch(err => {
            console.error('请求失败：', err)
        })
}

provide('baTable', baTable)

onMounted(() => {
    loadType()


})
</script>

<style scoped lang="scss"></style>
